import React from "react";
import "./myD.scss";
import { useState } from "react";
import { useRef } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Space } from "antd-mobile";
import { BellOutline } from "antd-mobile-icons";
import { Image,Popup,Button } from "antd-mobile";
import image from '../../../assets/doctor.png'
import myD1 from '../../../assets/myD1.png';
import myD2 from '../../../assets/myD2.png';
import myD3 from '../../../assets/myD3.png';
import myD4 from '../../../assets/myD4.png';

interface IndexProps {}
const Index:React.FC<IndexProps> = () => {
    const [modalVisible, setModalVisible] = useState(false);
  const [selectedImageSrc, setSelectedImageSrc] = useState<string | null>(null); // 保存选择的图片
  const navigate = useNavigate();
  const fileInputRef = useRef<HTMLInputElement>(null); // useRef用于引用input元素
  const back = () => {
    navigate("/");
  };
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <BellOutline />
      </Space>
    </div>
  );
  const handelToMyD = () => {
    navigate('/myD');
  };

  const handleImageClick = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
  };

 

  const handleChooseFromAlbum = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };
 const handleCancle=()=>{
  setModalVisible(false);
 };
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files && event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedImageSrc(reader.result as string); // 将选择的图片保存到状态中
      };
      reader.readAsDataURL(file);
    }
    setModalVisible(false); // 关闭弹出层
  };

  return (
    <div>
      <header>
        <NavBar
          onBack={back}
          right={right}
          style={{
            "--height": "3rem",
            "--border-bottom": "3px #eee solid",
          }}
        ></NavBar>
      </header>
      <main>
          <div  className="first">
               <Image src={selectedImageSrc||image} onClick={handleImageClick} fit='fill' />
          </div>
          <div className="second">
             <div className="item"> 
                 <Image src={myD1} fit='fill' />
                 <p>历史问诊</p>
             </div>
             <div className="item">
               <Image src={myD2} fit='fill' />
               <p>我的钱包</p>
             </div>
             <div className="item">
                <Image src={myD3} fit='fill' />
                <p>被采纳建议</p>
             </div>
             <div className="item">
               <Image src={myD4} fit='fill' />
               <p>设置自动回复</p>
             </div>
          </div>
      </main>
       {/* 底部弹出的选择框 */}
      <Popup
        visible={modalVisible}
        onClose={handleCloseModal}
        closeOnMaskClick={true}
      >
        <div style={{ padding: "16px" }}>
          
          <Button onClick={handleChooseFromAlbum}>更换背景图</Button>
          <Button onClick={handleCancle}>取消</Button>
        </div>
      </Popup>

      {/* 隐藏的文件选择器 */}
      <input
        type="file"
        ref={fileInputRef}
        accept="image/*"
        style={{ display: "none" }}
        onChange={handleFileChange}
      />

     
    </div>
  );
};
export default Index;
